<template>
    <div id='users'>
        <el-table :data="tableData">
            <el-table-column prop="username" label="用户名" >
            </el-table-column>
            <el-table-column  prop="email" label="邮箱" >
            </el-table-column>
            <el-table-column prop="phone" label="手机" >
            </el-table-column>
            <el-table-column prop="" label="操作" >
                    <div slot-scope="{row}">
                        <el-button-group>
                            <el-button type='default' round size='mini' @click="usersEdit(row),dialogVisible=true;dialogTitle='编辑'">编辑
                            </el-button>
                            <el-button type='default' round size='mini' @click='usersDelete(row.id)' >删除</el-button>
                            <el-button type='default' round size='mini' @click='usersResetpassword(row.id),open2'  >重置密码</el-button>
                        </el-button-group>
                    </div>
            </el-table-column>
        </el-table>
          <div style='margin-top:20px'>
                <el-pagination 
                    :current-page.sync="currentpage"
                    :page-size="pagesize" @current-change='getUsersList()'
                    layout=" prev, pager, next,total"
                    :total="total" background>
                </el-pagination> 
                      
          </div>
          <!-- 编辑对话框 -->
  <el-dialog width="400px" title="编辑" :visible.sync="dialogVisible" @close='dialogClose'>
         <el-form label-position="left" :model="formData" ref="formData" :rules='rules' label-width="60px">
          <el-form-item label="用户名" prop="text">
              <el-input v-model="formData.username"></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="num">
              <el-input v-model="formData.phone"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="formData.email"></el-input>
          </el-form-item>
        </el-form>
    <div slot="footer">
      <el-button type="danger" @click="dialogVisible=false">取 消</el-button>
      <el-button  type="primary" @click="usersEditbb" >确定</el-button>
    </div>
  </el-dialog>   
     <!-- 编辑对话框结束  -->
    </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [],
      total: 1,
      pagesize: 4,
      currentpage: 1,
      //验证规则开始
      rules: {
        username: [
          {
            validator: (rules, value, callback) => {
              switch (true) {
                case value.trim() === "":
                  callback(new Error("不能为空"));
                  break;
                case !/^.{2,18}$/.test(value):
                  callback(new Error("2-18"));
                  break;
                default:
                  callback();
              }
            }
          }
        ],
        phone: [
          {
            validator: (rules, value, callback) => {
              switch (true) {
                case value.trim() === "":
                  callback(new Error("不能为空"));
                  break;
                case !/^(13[0-9]|15[012356789]|18[0-9]|17[678]|14[57])[0-9]{8}$/.test(value):
                  callback(new Error("格式非法"));
                  break;
                default:
                  callback();
              }
            }
          }
        ],
        email: [
          {
            validator: (rules, value, callback) => {
              switch (true) {
                case value.trim() === "":
                  callback(new Error("不能为空"));
                  break;
                case !/^\w+@\w+\.\w+$/.test(value):
                  callback(new Error("格式非法"));
                  break;
                default:
                  callback();
              }
            }
          }
        ]
      },
      formData: {
        id: "",
        username: "",
        phone: "",
        email: "",
      },
      dialogVisible: false
    };
  },
  created() {
    this.getUsersList();
  },
  methods: {
    currentChange() {
      console.log(this.currentChange);
    },
    //调用列表
    getUsersList() {
      this.$http
        .get(
          `/users/list?pagesize=${this.pagesize}&currentpage=${
            this.currentpage
          }`
        )
        .then(result => {
          this.total = result.data.total;
          this.tableData = result.data.data;
        });
    },
    //编辑页面数据回填
    usersEdit(obj) {
          this.dialogVisible = true;
          this.formData.username=obj.username
          this.formData.email=obj.email
          this.formData.phone=obj.phone
          this.$set(this.formData,'id',obj.id)
    },
    //编辑保存
    usersEditbb(obj){
      this.$http
        .post("/users/edit", this.$qs.stringify(this.formData))
        .then(result => {
          this.dialogVisible = false;
          this.getUsersList();
            });
    },
    //删除数据
    usersDelete(id) {
        this.$http.get(`/users/delete?id=${id}`).then(result=>{
            this.getUsersList()
      })
    },
    //重置密码
    usersResetpassword(id) {
       this.$http.get(`/users/resetpassword?id=${id}`).then(result=>{
         this.open2()
      })
    },
    //关闭窗口函数
    dialogClose() {
      this.$refs.formData.resetFields();
    },
    //重置密码提示
    open2() {
        this.$message({
          message: '密码重置成功',
          type: 'success'
        });
    },
  }
};

</script>
<style>
</style>


